<template>
  <view class="container relative" style="position: relative;" v-cloak>
    <cu-custom bgColor="bg-cd">
      <block slot="content"><text class="text-white">个人中心</text></block>
    </cu-custom>
    <view class="u-skeleton">
      <view class="personHead flex align-center" style="padding-top: 80rpx;">
        <view class="flex align-center justify-between personpad" style="width: 100%;">
          <view class="flex align-center">
            <view>
              <image class="personImg" src="/static/user_index.png">
              </image>
            </view>
            <view class="margin-left">
              <view class="flex flex-direction" v-if="hasLogin">
                <text class="username">{{userInfo.userName}}</text>
                <!--                <text class="phone">租户:{{userInfo.tenantName}}</text>
                <text class="phone">租户ID:{{userInfo.tenantId}}</text> -->
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="padding">
        <view class="margin-top userIcon">
          <u-cell-group :border="false">
            <u-cell title="退出登录" :border="true" @click="loginOut">
              <view slot="title" style="display: flex; align-items: center">
                <image src="../../static/icon/goout.png" mode="widthFix" style="width: 40upx;margin-right: 32upx;"></image>
                <text style="margin-top: 0;font-size: 28upx;color: rgba(49, 55, 64, 1);">退出登录</text>
              </view>
            </u-cell>
            <u-cell title="清除本地缓存" :border="false" @click="clearSJ">
              <view slot="title" style="display: flex; align-items: center">
                <image src="../../static/icon/icon3.png" mode="widthFix" style="width: 40upx;margin-right: 32upx;"></image>
                <text style="margin-top: 0;font-size: 28upx;color: rgba(49, 55, 64, 1);">清除本地缓存</text>
              </view>
            </u-cell>
          </u-cell-group>
        </view>
      </view>
    </view>
    <cu-bar :current="4"></cu-bar>
  </view>
</template>
<script>
  import {
    mapState,
    mapMutations
  } from 'vuex';
  let startY = 0,
    moveY = 0,
    pageAtTop = true;
  export default {
    components: {},
    data() {
      return {
        userModel: {},
        CustomBar: this.CustomBar,
      }
    },
    onLoad() {

    },
    onShow() {

    },
    computed: {
      ...mapState(['hasLogin', 'userInfo'])
    },
    methods: {
      ...mapMutations(['logout']),
      clearSJ() {
        uni.removeStorage({
          key: 'localhost',
          success: (res) => {
            this.$api.msg('成功清理本地缓存~')
          }
        });
      },
      //退出
      loginOut() {
        uni.clearStorage();
        this.logout()
        uni.reLaunch({
          url: '/pages/public/login'
        })
      },
      /**
       * 统一跳转接口,拦截未登录路由
       * navigator标签现在默认没有转场动画，所以用view
       */
      relunchTo(url) {
        // if (!this.hasLogin) {
        // 	url = '/pages/public/login';
        // }
        uni.reLaunch({
          url
        })
      },
    }
  }
</script>
<style lang='scss'>
  page {
    background: rgba(245, 246, 247, 1);
  }

  %flex-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  %section {
    display: flex;
    justify-content: space-around;
    align-content: center;
    background: #fff;
    border-radius: 10upx;
  }

  .startButton {
    width: 100%;
    height: 96rpx;
    opacity: 1;
    border-radius: 16rpx;
    background: linear-gradient(180deg, rgba(18, 96, 252, 1) 0%, rgba(38, 129, 255, 1) 100%);
    box-shadow: 0px 17rpx 51rpx rgba(233, 239, 245, 1);
    display: flex;
    color: #ffffff;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    font-weight: 400;
    margin-top: 40rpx;
  }

  .imageButtion {
    background: none;
    width: 120upx;
    height: 120upx;
    border: none;
    padding: 0;
  }

  .imageButtion::after {
    display: none;
  }

  .labelSecModal {
    height: 188upx;
    opacity: 1;
    border-radius: 20upx;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 1.2upx 6upx rgba(224, 224, 224, 0.83);
    padding: 34upx 68upx;
  }

  .toImage {
    width: 56upx;
    height: 56upx;
  }

  .HeadTit {
    padding: 26upx;
    padding-bottom: 0;
    font-size: 30upx;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #222222;
    opacity: 0.9;
  }

  .reBox {
    position: absolute;
    width: 100%;
    bottom: -38upx;
    z-index: 99;

    .rechange {
      width: 238upx;
      height: 70upx;
      background: #FAFAFA;
      box-shadow: 0px 3px 9px 0px rgba(255, 154, 44, 0.2);
      border-radius: 35upx;
      font-size: 26upx;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #FF8D2E;
    }
  }

  .personHead {
    padding: 40upx 0;
    box-sizing: border-box;
    position: relative;
  }

  .userConP {
    padding: 0 30upx;
    position: relative;
    z-index: 99;

    .headBox {
      height: 404upx;
      margin-top: 40upx;
      background: #FFFFFF;
      border-radius: 15px;
      padding: 32upx 35upx;
    }
  }

  .personpad {
    padding: 0 40upx 0 30upx;
  }

  .personImg {
    width: 120upx;
    height: 120upx;
    border-radius: 50%;
  }

  .username {
    font-size: 36upx;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
  }

  .phone {
    font-size: 28upx;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
  }

  .boxTTT {
    .textBox {
      &:nth-last-child(1) {
        &::after {
          display: none;
        }
      }
    }
  }

  .textBox {
    font-size: 37upx;
    font-family: PingFang SC;
    width: 20%;
    font-weight: 500;
    color: rgba(41, 63, 102, 1);
    position: relative;

    &::after {
      content: "";
      width: 2upx;
      height: 22upx;
      position: absolute;
      right: -68upx;
      top: 34upx;
      background: #F5F6F6;
      opacity: 0.6;
    }

    .textView {
      font-size: 24upx;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #FFFFFF;
      opacity: 0.8;
      margin-top: 7upx;
    }
  }

  .user-section {
    height: 520upx;
    padding: 100upx 30upx 0;
    position: relative;

    .bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      filter: blur(1px);
      opacity: .7;
    }
  }

  .userIcon {
    padding: 20upx 40upx;
    background: #FFFFFF;
    box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.09);
    border-radius: 10px;
    position: relative;
    z-index: 2;

    text {
      font-size: 24upx;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #878787;
      opacity: 0.9;
      margin-top: 8upx;
    }

    .u-cell__body {
      padding: 40upx 0 !important;
    }
  }

  .iconTabel {
    height: 44upx;
  }

  .iconText {
    font-size: 28upx;
    font-weight: 400;
    color: rgba(41, 63, 102, 1);
  }

  .markImage {
    width: 100%;
    position: absolute;
    top: 0;
    z-index: -1;
  }

  .cancleBtn {
    width: 160.62upx;
    height: 80upx;
    opacity: 1;
    border-radius: 12rpx;
    background: rgba(0, 0, 0, 0.05);
    font-size: 32upx;
    font-weight: 500;
    letter-spacing: 6px;
    color: rgba(49, 55, 64, 1);

    &.sumbit {
      background: linear-gradient(180deg, rgba(18, 96, 252, 1) 0%, rgba(38, 129, 255, 1) 100%);
      color: #FFFFFF;
    }
  }

  .avatar-wrapper {
    background: none;
    margin: 0;

    &::after {
      border: none;
    }
  }
</style>